<template>
  <div class="home">
    <el-backtop :bottom="100" :visibility-height="10"> </el-backtop>
    <div class="header">
      <img class="homelogo" src="../assets/img/simtoplogo.png" />
      <div class="firstindex">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#00000000"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item
            v-for="item in navitems"
            :key="item.index"
            :index="item.index"
            @click="changenav(item.index)"
          >
            <span style="font-size:0.17rem">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="searchbox">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchKeyWord"
          @keyup.enter.native="enterSearch"
        >
        </el-input>
      </div>
      <div class="me">
        <el-dropdown placement="bottom-start" @command="myoperation">
          <span class="el-dropdown-link">
            {{ this.userInfo.username
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a" icon="el-icon-user"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item
              command="b"
              icon="el-icon-setting"
              v-show="isadmin"
              >管理中心
            </el-dropdown-item>
            <el-dropdown-item command="c" icon="el-icon-tickets"
              >帮助文档</el-dropdown-item
            >
            <el-dropdown-item command="d" icon="el-icon-switch-button"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="maincontent" v-show="showmain">
      <div class="tagsbox">
        <ul class="ullists">
          <li
            v-for="(item, index) in taglist"
            @click="clickcategory(index, item)"
            :key="index"
            class="tag"
            :class="categoryIndex == index ? 'active' : ''"
          >
            {{ item.detailName }}
          </li>
        </ul>
        <div class="clearfloat"></div>
      </div>
      <div class="maintitle">{{ title }}</div>
      <Button class="uploadbtn" type="primary" size="large" @click="Upload"
        >上传文件</Button
      >
      <div class="recontent">
        <div class="sorryfornot" v-show="noresource">
          暂无资源，请看看其他的吧~
        </div>
        <div
          class="resource"
          v-for="(item, index) in resourcelist.slice(
            (page.index - 1) * page.size,
            page.index * page.size
          )"
          :key="index"
          @click="opendetail(item.dataId)"
        >
          <img class="showimg" :src="item.dataImage" />
          <div class="resname">
            {{ item.dataName }}
          </div>
          <div class="typename">
            文件类型:
            {{ item.dataCategoryName }}
          </div>
          <Dropdown
            style="position: absolute;bottom: 0.36rem;right: 0.15rem;"
            @click.native="prevent"
          >
            <Button
              type="primary"
              style="width:0.25rem;height:0.25rem;padding:0;"
            >
              <Icon type="ios-download-outline"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem
                v-show="norights"
                v-for="(i, index) in item.dataVersionList"
                :key="index"
                ><a
                  :href="i.versionPath"
                  type="download"
                  style="display:block;width:100%;text-align:center;"
                  >{{ i.versionName }}</a
                >
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <div class="author">
            <img class="avatar" src="../assets/img/avatar.png" />
            <div class="authorname">
              {{ item.dataCreator }}
            </div>
            <div class="cteatetime">
              {{ item.dataCreateTime }}
            </div>
          </div>
        </div>
        <div class="pagination">
          <Page
            show-total
            show-elevator
            :total="resourcelist.length"
            :current="page.index"
            :page-size="page.size"
            class="page"
            @on-change="pIndexChange"
          ></Page>
        </div>
      </div>
    </div>
    <div class="detailcontent" :id="dataId" v-show="showdetail">
      <div class="backtoresource" @click="backto">返回</div>
      <div class="position">
        当前位置：{{ datacontent.dataCategoryName }}>{{
          datacontent.dataDetailName
        }}
      </div>
      <div class="datatitle">
        {{ datacontent.dataName ? datacontent.dataName : null }}
      </div>
      <div class="imglists">
        <div class="swiper-box">
          <!-- swiper1 -->
          <swiper
            :options="swiperOptionTop"
            class="gallery-top"
            ref="swiperTop"
          >
            <swiper-slide
              v-for="(item, index) in datacontent.imagesList"
              :key="index"
              :style="{ backgroundImage: 'url(' + item.imagePath + ')' }"
            ></swiper-slide>
            <div
              class="swiper-button-next swiper-button-white"
              slot="button-next"
            ></div>
            <div
              class="swiper-button-prev swiper-button-white"
              slot="button-prev"
            ></div>
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            :options="swiperOptionThumbs"
            class="gallery-thumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              v-for="(item, index) in datacontent.imagesList"
              :key="index"
              :style="{ backgroundImage: 'url(' + item.imagePath + ')' }"
            ></swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="rightdetail">
        <div class="detailtag">
          {{ datacontent.dataCategoryName }}
        </div>

        <Dropdown
          style="position: absolute;left: 1.496rem;top: 0;width:1.44rem;height:0.35rem;"
          @click.native="norightdownload"
        >
          <Button
            type="primary"
            icon="ios-download-outline"
            style="border-radius: 0.2rem;font-family: 'PingFang';width:1.44rem;height:0.35rem;padding:0"
          >
            立即下载</Button
          >
          <DropdownMenu slot="list">
            <DropdownItem
              v-show="norights"
              v-for="(i, index) in datacontent.dataVersionList"
              :key="index"
              ><a
                :href="i.versionPath"
                type="download"
                style="display:block;width:100%;text-align:center;"
                >{{ i.versionName }}</a
              ></DropdownItem
            >
          </DropdownMenu>
        </Dropdown>
        <img class="back" @click="backto" src="../assets/img/back.png" />
        <div class="line"></div>
        <div class="name2">
          {{ datacontent.dataName }}
        </div>
        <div class="typedetail">
          资源编号：{{ datacontent.dataId }} <br />二级索引：{{
            datacontent.dataDetailName
          }}<br />下载次数：{{ datacontent.dataDownTimes }}<br />

          文件大小：{{ datacontent.dataSize }} <br />文件格式：{{
            datacontent.dataSuffix
          }}<br />
          上传时间：{{ datacontent.dataCreateTime }}
        </div>
        <div class="suthoravatar">
          <img class="authorimg" src="../assets/img/avatar.png" />
          <div class="authorname2">{{ datacontent.dataCreator }}</div>
          <!-- <Button
            type="primary"
            icon="ios-cloud-upload-outline"
            style="position:relative;font-family: 'PingFang';width:1.44rem;height:0.35rem;padding:0;top: 50%;transform: translateY(-50%);float:right;margin-right:0.7rem;"
          >
            上传版本</Button
          > -->
          <div class="line2"></div>
        </div>
        <div class="doctitle">资源详情</div>
        <div class="doc">
          {{ datacontent.dataIntroduce }}
        </div>
      </div>
    </div>
    <Modal
      v-model="modalupload"
      class="modalupload"
      width="660"
      :styles="{ top: '50px' }"
      @on-cancel="cancelupload"
    >
      <p
        slot="header"
        style="text-align:center;font-size:18px;font-family:'PingFang';"
      >
        <Icon type="md-cloud-upload" />
        <span>上传文件</span>
      </p>
      <div class="tags">
        <Tag size="large" class="tagslect1">一级索引:</Tag>
        <Select
          @on-change="SelectValue1"
          v-model="model1"
          placeholder="请选择一级索引"
          style="width:200px"
          clearable
          ref="secondslect1"
        >
          <Option
            v-for="item in firstIndexlist"
            :value="item.categoryId"
            :key="item.categoryId"
            >{{ item.categoryName }}</Option
          >
        </Select>
        <Tag size="large" class="tagslect2">二级索引:</Tag>
        <Select
          @on-change="SelectValue2"
          v-model="model2"
          placeholder="请选择二级索引"
          style="width:200px"
          clearable
          ref="secondslect2"
        >
          <Option
            v-for="item in secondIndexlist"
            :value="item.detailId"
            :key="item.detailId"
            >{{ item.detailName }}</Option
          >
        </Select>
      </div>
      <p class="ptitle">
        1.资源名称
      </p>
      <div class="intro">
        <Input
          v-model="dataname"
          placeholder="Enter something..."
          style="width: 400px"
        />
      </div>
      <!-- <p class="ptitle">
        上传封面图
      </p>
      <p class="notice" style="color:#2d8cf0;font-size:12px;">(png、jpg格式)</p>

      <div class="firstimg"></div>
      <el-upload
        class="avatar-uploader"
        ref="upload1"
        :auto-upload="false"
        :multiple="false"
        action="/iconupload"
        :show-file-list="false"
        :on-change="imgSaveToUrl"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatarimg" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload> -->
      <p class="ptitle">2.资源文件</p>
      <Upload
        :before-upload="handleUpload"
        action="#"
        class="choicefile"
        ref="upload2"
      >
        <Button type="primary" icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>
      <div v-if="file !== null" style="text-align:center;color:#2d8cf0;">
        {{ file.name }}
      </div>

      <p class="ptitle">3.资源简介</p>
      <div class="intro">
        <Input
          v-model="resourceintro"
          type="textarea"
          style="width: 400px"
          :rows="5"
          placeholder="在此输入资源简介"
        />
      </div>
      <p class="ptitle">4.版本名称</p>
      <div class="intro">
        <Input
          v-model="version"
          placeholder="Enter something..."
          style="width: 400px"
        />
      </div>
      <p class="ptitle">5.轮播图片</p>
      <p class="notice" style="color:#2d8cf0;font-size:12px;">(png、jpg格式)</p>
      <div class="imglist">
        <el-upload
          ref="upload3"
          action="none"
          list-type="picture-card"
          :auto-upload="false"
          :on-remove="handleRemove"
          :before-upload="beforeimgUpload"
          :on-change="OnChangepic"
          :file-list="this.imglist"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="progresstitle">上传进度</div>
      <div
        class="progress"
        :style="{
          backgroundImage:
            'linear-gradient(to right,#00a2ff 0%,#00a2ff ' +
            progress +
            ',#C0C7CB ' +
            progress +
            ',#C0C7CB 100%)'
        }"
      >
        {{ progress }}
      </div>
      <div slot="footer" class="modalfooter">
        <Button
          type="primary"
          size="large"
          long
          :loading="modal_loading"
          class="uploadok"
          @click="Uploadresource"
          >上传</Button
        >
        <Button
          type="error"
          size="large"
          long
          class="uploadok"
          @click="cancelupload"
          >取消上传</Button
        >
      </div>
    </Modal>
    <!-- <Modal v-model="modaldownload"
           title="正在下载…"
           @on-ok="downloadok"
           @on-cancel="downloadcancel">
      <div class="progresstitle">下载进度</div>
      <div
        class="progress"
        :style="{
          backgroundImage:
            'linear-gradient(to right,#00a2ff 0%,#00a2ff ' +
            progressdownload +
            ',#C0C7CB ' +
            progressdownload +
            ',#C0C7CB 100%)'
        }"
      >
        {{ progressdownload }}
      </div>
    </Modal> -->
  </div>
</template>
<script>
import UserApi from "../api/Userapi.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { CancelToken, isCancel } from "axios";
export default {
  data() {
    return {
      modaldownload: false,
      progressdownload: 0,
      progress: 0,
      model1: "",
      model2: "",
      firstIndexlist: [],
      secondIndexlist: [],
      dataname: "",
      resourceintro: "",
      version: "",
      imglist: [],
      file: null,
      loadingStatus: false,
      fileList: [],
      avatarimgFile: {}, //封面图
      imageUrl: "", //封面图
      isadmin: false,
      modalupload: false,
      modal_loading: false,
      page: {
        index: 1,
        size: 12,
        total: 100000
      },
      userInfo: {
        password: "",
        loginAuthority: 1,
        loginName: "one",
        uploadAuthority: 0,
        downloadAuthority: 1,
        manageAuthority: 0,
        depart: "研发部",
        exp: 1582635727275,
        userId: 4,
        username: "未登录"
      },
      loading: true,
      showmain: true,
      showdetail: false,
      noresource: false,
      categoryIndex: null, //点击当前背景变成白色索引
      activeIndex: "0",
      navitems: [{ index: "0", name: "首页" }],
      title: "首页",
      input: "",
      taglist: [{ detailId: "", detailName: "全部资源", detailCategoryId: "" }],
      detailCategoryId: "",
      resourcelist: [],
      clickFirstIndex: 0,
      clickSecondIndex: "",
      searchKeyWord: "",
      maxSize: 100000,
      dataId: null,
      imgurllists: [
        { url: "http://106.14.183.14/img/detailimg1.jpg" },
        { url: "http://106.14.183.14/img/detailimg2.jpg" },
        { url: "http://106.14.183.14/img/detailimg3.jpg" },
        { url: "http://106.14.183.14/img/detailimg4.jpg" },
        { url: "http://106.14.183.14/img/detailimg5.jpg" }
      ],
      datacontent: {
        dataId: "这是dataid",
        dataName: "资源名称",
        dataSuffix: "这是资源详情",
        dataSize: "1MB",
        dataCreateTime: "2020-02-13",
        dataCreator: "李文浩",
        dataDownTimes: 11,
        dataImage: "asdfasd",
        detailId: 1,
        dataDownloadFilepath: "adsfasdf",
        dataCategoryName: "形拓资源网",
        dataDetailName: "这是资源详情",
        imagesList: [],
        dataVersionList: []
      },
      swiperOptionTop: {
        spaceBetween: 0,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true,
        watchSlidesVisibility: true
      },
      cancel: null,
      norights: true
    };
  },
  methods: {
    // downloadok() {
    //   this.progressdownload = 0;
    //   this.modaldownload = false;
    // },
    // downloadcancel() {
    //   this.progressdownload = 0;
    //   this.modaldownload = false;
    // },
    // downloadResource1(item, i) {
    //   //首页的下载
    //   event.stopPropagation(); //阻止触发父元素的点击事件
    //   this.modaldownload = true;
    //   this.$axios
    //     .get(UserApi.downloadFile + i.versionId, {
    //       responseType: "blob", //告诉服务器我们需要的响应格式
    //       onUploadProgress: progressEvent => {
    //         var complete =
    //           (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
    //         this.progressdownload = complete;
    //       }
    //     })
    //     .then(res => {
    //       // this.download(res);
    //       if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    //         let blob = new Blob([res.data]);
    //         window.navigator.msSaveOrOpenBlob(blob);
    //       } else {
    //         /* 火狐谷歌的文件下载方式 */
    //         var blob = new Blob([res.data]);
    //         var downloadElement = document.createElement("a");
    //         var href = window.URL.createObjectURL(blob);
    //         downloadElement.href = href;
    //         downloadElement.download = item.dataName + ".zip";
    //         document.body.appendChild(downloadElement);
    //         downloadElement.click();
    //         document.body.removeChild(downloadElement);
    //         window.URL.revokeObjectURL(href);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    // downloadResource(versionId) {
    //   //资源详情下载文件
    //   this.modaldownload = true;
    //   this.$axios
    //     .get(UserApi.downloadFile + versionId, {
    //       responseType: "blob" //告诉服务器我们需要的响应格式
    //     })
    //     .then(res => {
    //       // this.download(res);
    //       if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    //         let blob = new Blob([res.data]);
    //         window.navigator.msSaveOrOpenBlob(blob);
    //       } else {
    //         /* 火狐谷歌的文件下载方式 */
    //         var blob = new Blob([res.data]);
    //         var downloadElement = document.createElement("a");
    //         var href = window.URL.createObjectURL(blob);
    //         downloadElement.href = href;
    //         downloadElement.download = this.datacontent.dataName + ".zip";
    //         document.body.appendChild(downloadElement);
    //         downloadElement.click();
    //         document.body.removeChild(downloadElement);
    //         window.URL.revokeObjectURL(href);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    norightdownload() {
      if (this.userInfo.downloadAuthority === 0) {
        this.norights = false;
        this.$Modal.error({
          title: "提示",
          content: "对不起，你没有下载权限！"
        });
      }
    },
    prevent() {
      event.stopPropagation(); //阻止触发父元素的点击事件
      if (this.userInfo.downloadAuthority === 0) {
        this.norights = false;
        this.$Modal.error({
          title: "提示",
          content: "对不起，你没有下载权限！"
        });
      }
    },

    Uploadresource() {
      if (this.model1.length === 0) {
        this.$Modal.error({
          title: "提示",
          content: "请选择索引！"
        });
      }
      if (this.dataname.length === 0) {
        this.$Modal.error({
          title: "提示",
          content: "请输入资源名称！"
        });
      }
      if (this.resourceintro.length === 0) {
      }
      if (this.model2.length !== 0) {
        this.modal_loading = true;
        var formdata = new FormData();
        formdata.append("dataName", this.dataname);
        formdata.append("file2", this.file);
        formdata.append("detailId", this.model2);
        formdata.append("dataIntroduce", this.resourceintro);
        formdata.append("versionName", this.version);
        for (var i in this.imglist) {
          formdata.append("files", this.imglist[i].raw);
        }
        var config = {
          cancelToken: new CancelToken(c => (this.cancel = c)), //axios的取消请求方法
          onUploadProgress: progressEvent => {
            var complete =
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
            this.progress = complete;
          },
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.axios
          .post(UserApi.uploadResource, formdata, config)
          .then(res => {
            if (res.data.status == 0) {
              window.console.log("上传结果", res);
              this.modal_loading = false;
              this.$message({
                type: "success",
                message: res.data.msg
              });
              this.cleanall();
              //更新资源列表
              if (this.clickSecondIndex.length !== 0) {
                this.searchSecondResource();
              } else {
                this.firstIndexSearch();
              }
            } else {
              this.modal_loading = false;
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
          .catch(err => {
            if (isCancel) {
              window.console.log(err.message);
            } else {
              // 处理错误
              window.console.log(err.message);
            }
          });
      } else {
        this.$Message.error("请选择二级索引");
      }
    },
    GetFirstIndex() {
      //筛选器获取一级索引列表
      this.axios.get(UserApi.firstIndex).then(res => {
        if (res.data.status == 0) {
          this.firstIndexlist = res.data.data;
          window.console.log(this.model1);
        } else {
          window.console.log("获取不到一级索引");
        }
      });
    },
    SelectValue1(e) {
      //获取筛选器一级索引选中值
      this.model1 = e;
      window.console.log(this.model1);
      //级联更新二级选择器
      this.axios
        .get(UserApi.secondIndex, {
          params: {
            detailCategoryId: this.model1
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            this.secondIndexlist = res.data.data;
          }
        });
      this.$refs.secondslect2.clearSingleSelect();
    },
    SelectValue2(e) {
      //获取筛选器一级索引选中值
      this.model2 = e;
      window.console.log(this.model2);
    },
    cleanall() {
      this.$refs.secondslect1.clearSingleSelect();
      this.$refs.secondslect2.clearSingleSelect();
      this.$refs.upload3.clearFiles();
      // this.avatarimgFile = null;
      this.imageUrl = null;
      this.file = null;
      this.dataname = "";
      this.resourceintro = "";
      this.version = "";
      this.imglist = [];
      this.modalupload = false;
      this.modal_loading = false;
      this.progress = 0;
    },
    cancelupload() {
      if (this.cancel) {
        this.cancel("取消上传");
      }

      this.$refs.secondslect1.clearSingleSelect();
      this.$refs.secondslect2.clearSingleSelect();
      this.$refs.upload3.clearFiles();
      // this.avatarimgFile = null;
      this.dataname = "";
      this.imageUrl = null;
      this.file = null;
      this.resourceintro = "";
      this.version = "";
      this.imglist = [];
      this.modalupload = false;
      this.modal_loading = false;
      this.progress = 0;
    },
    ////////////////////////
    handleUpload(file) {
      this.file = file;
      window.console.log(this.file);
      return false;
    },
    upload() {
      this.loadingStatus = true;
    },
    /////////////////////////////////////////////////
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      return false;
    },
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(file) {
      // 也可以用file
      this.avatarimgFile = file.raw; // 或者 this.avatarimgFile=file.raw
      window.console.log(this.avatarimgFile);
      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader();
      reader.readAsDataURL(this.avatarimgFile); // 这里也可以直接写参数file.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.log(reader.result)看一下
      reader.onload = () => {
        // console.log(reader.result);
      };

      /* 另外一种本地预览方法 */
      let URL = window.URL || window.webkitURL;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    /////////
    handleRemove(file, fileList) {
      let index = this.imglist.findIndex(fileItem => {
        return fileItem.uid === file.uid;
      });
      this.imglist.splice(index, 1);
      console.log(this.imglist);
    },

    beforeimgUpload(file) {
      return false;
    },
    OnChangepic(file, fileList) {
      const isType = file.type === "image/jpeg" || "image/png";
      const isLt5M = file.size / 1024 / 1024 < 20;

      if (!isType) {
        this.$Message.error("上传头像图片只能是 JPG 格式!");
        fileList.pop();
      }
      if (!isLt5M) {
        this.$Message.error("上传头像图片大小不能超过 20MB!");
        fileList.pop();
      }
      this.imglist.push(file);
      window.console.log(this.imglist);
    },

    addOk1() {},

    addCancel1() {},
    Upload() {
      //上传文件按钮
      if (this.userInfo.uploadAuthority === 1) {
        this.modalupload = true;
        this.GetFirstIndex();
      } else {
        this.$Modal.error({
          title: "提示",
          content: "对不起，你没有上传权限！"
        });
      }
    },

    pIndexChange(i) {
      //切换页面
      this.page.index = i;
    },
    myoperation(e) {
      //点击右上角用户名点击事件
      if (e) {
      }
      switch (e) {
        case "a":
          this.$router.push({ name: "me" });
          break;
        case "b":
          if (this.userInfo.manageAuthority === 1) {
            this.$router.push({ name: "admin" });
          }
          break;
        case "c":
          window.location.href = "http://192.168.0.2/simtopmanagedoc";
          break;
        case "d":
          this.$store.commit("clearToken");
          this.$router.push({ name: "login" });
          sessionStorage.removeItem("store");
          break;
        default:
          break;
      }
    },
    getUsersMsg() {
      //获取用户个人信息
      this.userInfo = this.$store.state.userInfo;
      window.console.log("个人信息", this.userInfo);
      if (this.userInfo.manageAuthority === 1) {
        this.isadmin = true;
      }
      if (this.userInfo.downloadAuthority === 0) {
        this.norights = false;
      }
    },
    enterSearch() {
      this.showmain = true;
      this.showdetail = false;
      //搜索功能
      this.title = "搜索结果";
      var searchparams = new URLSearchParams();
      searchparams.append("data_name", this.searchKeyWord);
      searchparams.append("pageSize", this.maxSize);
      searchparams.append("pageNum", 1);
      this.axios.post(UserApi.search, searchparams).then(res => {
        if (res.data.status == 0) {
          window.console.log("搜索结果", res.data.data.list);
          this.resourcelist = res.data.data.list;
          if (this.resourcelist.length === 0) {
            this.noresource = true;
          } else {
            this.noresource = false;
          }
        } else {
          this.$message({
            type: "error",
            message: res.data.msg
          });
        }
      });
    },

    clickcategory(index, item) {
      //点击二级标签变色
      // 这里我们传入一个当前值
      this.categoryIndex = index;
      this.clickSecondIndex = parseInt(item.detailId);
      this.searchSecondResource();
    },
    searchSecondResource() {
      window.console.log(this.clickSecondIndex);
      //获取二级索引对应资源
      if (this.clickSecondIndex) {
        this.axios
          .get(UserApi.secondResource, {
            params: {
              detailId: this.clickSecondIndex,
              pageSize: this.maxSize,
              pageNum: 1
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              window.console.log("点击二级索引资源", res);
              this.resourcelist = res.data.data.list;
              if (this.resourcelist.length === 0) {
                //若无资源则提示标签
                this.noresource = true;
              } else {
                this.noresource = false;
              }
            } else {
              window.console.log("接口调用失败");
            }
          });
      }
    },
    changenav(e) {
      this.showmain = true;
      this.showdetail = false;
      this.activeSecondIndexId = e;
      //点击nav栏刷新页面数据
      window.console.log(e); //navitems.index
      for (var i in this.navitems) {
        //如果 navitems.index=e，那么变更对应页面标题
        if (this.navitems[i].index === e) {
          this.title = this.navitems[i].name;
        }
      }
      this.categoryIndex = null;
      this.clickFirstIndex = parseInt(e);
      this.getSecondIndex(e);
      this.firstIndexSearch();
    },

    firstIndexSearch() {
      this.showmain = true;
      this.showdetail = false;
      //点击一索引展示资源及二级索引
      window.console.log(this.clickFirstIndex);
      var navitem = this.clickFirstIndex;
      if (navitem === 0) {
        //为0的时候是选中首页
        this.getAllResource();
      } else {
        this.axios
          .get(UserApi.firstResource, {
            params: {
              categoryId: navitem,
              pageSize: this.maxSize,
              pageNum: 1
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              window.console.log("一级资源展开", res);
              this.resourcelist = res.data.data.list;
              if (this.resourcelist.length === 0) {
                //若无资源则提示标签
                this.noresource = true;
              } else {
                this.noresource = false;
              }
            } else {
              window.console.log("接口调用失败");
            }
          });
      }
    },

    getAllResource() {
      //获取首页所有资源
      this.showmain = true;
      this.showdetail = false;
      this.clickFirstIndex = 0;
      var allparams = new URLSearchParams();
      allparams.append("pageSize", this.maxSize);
      allparams.append("pageNum", 1);

      this.axios.post(UserApi.getAllData, allparams).then(res => {
        if (res.data.status == 0) {
          this.resourcelist = res.data.data.list;
          window.console.log(this.resourcelist);
          if (this.resourcelist.length === 0) {
            //若无资源则提示标签
            this.noresource = true;
          } else {
            this.noresource = false;
          }
        } else {
          window.console.log("接口调用失败");
        }
      });
    },

    getFirstIndex() {
      //获取一级索引列表
      this.axios.get(UserApi.firstIndex).then(res => {
        if (res.data.status == 0) {
          var firstIndexs = this.navitems;
          window.console.log("一级索引", firstIndexs);
          for (var i in res.data.data) {
            firstIndexs.push({
              index: res.data.data[i].categoryId.toString(),
              name: res.data.data[i].categoryName
            });
          }
          window.console.log(firstIndexs);
          this.navitems = firstIndexs;
        } else {
          window.console.log("接口调用失败");
        }
      });
    },
    getSecondIndex(second) {
      //获取二级索引列表
      this.detailCategoryId = second;
      this.axios
        .get(UserApi.secondIndex, {
          params: { detailCategoryId: this.detailCategoryId }
        })
        .then(res => {
          if (res.data.status == 0) {
            if (res.data.data.length === 0) {
              this.taglist = [
                //若无标签则显示全部资源
                { detailId: "", detailName: "全部资源", detailCategoryId: "" }
              ];
            } else {
              this.taglist = res.data.data;
            }
            window.console.log("二级索引", this.taglist);
          } else {
            window.console.log("接口调用失败");
          }
        });
    },
    opendetail(id) {
      //手动置顶
      window.scrollTo(0, 0);
      //打开资源详情
      this.dataId = id;
      this.showmain = false;
      this.showdetail = true;
      //动态加载资源详情
      this.axios
        .get(UserApi.getDataDetail, { params: { dataId: this.dataId } })
        .then(res => {
          if (res.data.status == 0) {
            if (res.data.data.length !== 0) {
              this.datacontent = res.data.data[0];
            } else {
              this.datacontent = {
                dataId: "这是dataid",
                dataName: "资源名称",
                dataSuffix: "这是资源详情",
                dataSize: "1MB",
                dataCreateTime: "2020-02-13",
                dataCreator: "李文浩",
                dataDownTimes: 11,
                dataImage: "asdfasd",
                detailId: 1,
                dataDownloadFilepath: "adsfasdf",
                dataCategoryName: "形拓资源网",
                dataDetailName: "这是资源详情",
                imagesList: [],
                dataVersionList: []
              };
            }

            window.console.log(this.datacontent);
          } else {
            window.console.log("接口调用失败");
          }
        });
    },
    backto() {
      this.showmain = true;
      this.showdetail = false;
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted() {
    this.getUsersMsg();
    this.showmain = true;
    this.showdetail = false;
    this.getFirstIndex();
    this.getAllResource();
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  }
};
</script>
<style lang="scss">
body {
  background: #ffffff;
  background-size: 100% 100%;
  width: 100%;
  position: relative;
}
#app {
  background-color: #ffffff;
}
.home {
  position: relative;
  width: 100%;
  min-height: 10.8rem;
  background-color: #ffffff;
}
.header {
  position: relative;
  width: 100%;
  height: 1.2rem;
  background: url(../assets/img/header.png) no-repeat;
  background-size: 100% 100%;
}
.homelogo {
  position: absolute;
  display: block;
  width: 2.01rem;
  height: 0.35rem;
  left: 0.42rem;
  top: 0.43rem;
}
.firstindex {
  font-family: "PingFang";
  font-size: 0.18rem;
  position: relative;
  left: 3.11rem;
  min-width: 1rem;
  max-width: 8.9rem;
  margin-right: 6.26rem;
  /* overflow: hidden; */
  top: 50%;
  transform: translateY(-50%);
}
.firstindex .el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
.firstindex .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: rgba(0, 0, 0, 0) !important;
}
.firstindex .el-menu--horizontal > .el-menu-item {
  float: left;
  height: 0.35rem;
  line-height: 0.35rem;
  margin: 0 10px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
.firstindex .el-menu-item {
  padding: 0 10px;
}
.searchbox {
  position: absolute;
  right: 2.26rem;
  width: 4rem;
  top: 50%;
  transform: translateY(-50%);
}
.me {
  position: absolute;
  width: 1.05rem;
  height: 0.5rem;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.me > .el-dropdown {
  font-size: 0.18rem;
  height: 0.5rem;
  font-family: "PingFang";
  background: #00000000;
  color: #ffffff;
  right: 0;
  left: 0;
  width: 100%;
}
.maincontent {
  width: 80%;
  margin: 0 auto;
}
.tagsbox {
  position: relative;
  background-color: #f9f9f9;
  min-height: 0.57rem;
  padding: 0.05rem 0 0.05rem 0.1rem;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  margin-right: 0.3rem;
  border-radius: 0.08rem;
}
.ullists {
  position: relative;
  width: 100%;
  height: 0.34rem;
}
.tag {
  float: left;
  list-style: none;
  line-height: 0.34rem;
  font-size: 0.14rem;
  font-family: "PingFang";
  border-radius: 0.03rem;
  background-color: #ffffff;
  padding: 0 0.1rem;
  margin-right: 0.1rem;
  margin-top: 0.05rem;
  margin-bottom: 0.05rem;
  cursor: pointer;
}
.maintitle {
  display: inline-block;
  font-size: 0.32rem;
  font-family: "PingFang";
  // margin-left: 1rem;
  margin-bottom: 0.25rem;
  height: 0.45rem;
  font-weight: 400;
  line-height: 0.45rem;
}
.recontent {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // margin: 0 1rem;
}
.sorryfornot {
  width: 100%;
  text-align: center;
  color: #333333;
  font-size: 0.25rem;
  font-family: "PingFang";
  margin-top: 0.5rem;
}

.resource {
  position: relative;
  width: 2.288rem;
  height: 3.2rem;
  border-radius: 0.05rem;
  /* border: 1px solid rgba(240, 240, 241, 1); */
  -webkit-box-shadow: 0px 0.01rem 0.04rem 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0.01rem 0.04rem 0px rgba(0, 0, 0, 0.2);
  margin-right: 0.225rem;
  margin-bottom: 0.3rem;
  cursor: pointer;
}

.showimg {
  display: block;
  width: 100%;
  height: 2rem;
  border-radius: 0.05rem 0.05rem 0 0;
}
.resname {
  max-width: 1.968rem;
  height: 0.4rem;
  line-height: 0.2rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-left: 0.16rem;
  margin-top: 0.12rem;
  font-size: 0.14rem;
  font-family: "PingFang";
}
.typename {
  position: absolute;
  bottom: 0.4rem;
  max-width: 2.48rem;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0.16rem;
  font-size: 0.1rem;
  font-family: "PingFang";
  color: rgba(187, 187, 187, 1);
  height: 0.2rem;
  line-height: 0.2rem;
}
.ivu-icon {
  vertical-align: middle;
}
.author {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 0.32rem;
  border-top: 1px solid rgba(187, 187, 187, 1);
}
.avatar {
  position: relative;
  display: block;
  width: 0.2rem;
  height: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.16rem;
}
.authorname {
  position: absolute;
  left: 0.432rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.12rem;
  font-family: "PingFang";
  color: rgba(69, 69, 69, 1);
}
.cteatetime {
  position: absolute;
  right: 0.16rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.12rem;
  font-family: "PingFang";
  color: rgba(187, 187, 187, 1);
}
.active {
  background-color: #004cfd;
  color: #ffffff;
}

/* detailpage */
.detailcontent {
  position: relative;
  width: 12.62rem;
  margin: 0 auto;
  padding-bottom: 1.05rem;
}
.position {
  // position: absolute;
  font-size: 0.16rem;
  font-weight: 400;
  color: rgba(187, 187, 187, 1);
  line-height: 0.23rem;
  // margin-left: 0.6rem;
  margin-top: 0.1rem;
}
.backtoresource {
  position: absolute;
  display: none;
  width: 1.2rem;
  height: 0.4rem;
  top: 0.7rem;
  right: 0.5rem;
  color: #000;
  /* background-color: #004dff; */
  border-radius: 0.1rem;
  border: 0.01rem solid;
  font-size: 0.2rem;
  font-family: "PingFang";
  line-height: 0.4rem;
  text-align: center;
  cursor: pointer;
}
.datatitle {
  max-width: 7.4rem;
  font-size: 0.3rem;
  margin-top: 0.05rem;
  font-family: "PingFang";
  font-weight: 400;
  color: #454545;
  line-height: 0.4rem;
}
.imglist {
  display: flex;
  justify-content: center;
}
.imglists {
  // position: absolute;

  width: 7.4rem;
  height: 7rem;
  margin-top: 0.1rem;
  // margin-left: 0.6rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0.03rem 0.02rem 0.11rem -0.02rem rgba(0, 0, 0, 0.5);
  border-radius: 0.01rem;
  // margin-bottom: 1.05rem;
}
.rightdetail {
  position: absolute;
  width: 4.32rem;
  left: 8.3rem;
  top: 0.4rem;
}
.detailtag {
  position: absolute;
  left: 0.4rem;
  // top: 0.5rem;
  top: 0.07rem;
  width: 0.696rem;
  height: 0.24rem;
  background: rgba(255, 159, 0, 1);
  color: #ffffff;
  border-radius: 0.05rem;
  font-size: 0.112rem;
  font-family: "PingFang";
  line-height: 0.24rem;
  text-align: center;
}
.downloadbtn {
  position: absolute;
  left: 1.496rem;
  // top: 0.45rem;
  top: 0;
  height: 0.4rem;
  width: 1.44rem;
  font-size: 0.176rem;
  font-family: "PingFang";
  border-radius: 0.16rem;
  line-height: 0.4rem;
  background: rgba(0, 77, 255, 1);
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}
.back {
  position: absolute;
  display: block;
  width: 0.32rem;
  height: 0.32rem;
  top: 0.02rem;
  right: 0.56rem;
  cursor: pointer;
}

.name2 {
  position: relative;
  left: 0.4rem;
  margin-top: 0.64rem;
  width: 3.52rem;
  font-size: 0.208rem;
  line-height: 0.376rem;
  font-weight: bold;
  font-family: "PingFang";
  text-align: justify;
  text-align-last: left;
}
.line {
  position: absolute;
  left: 0.28rem;
  top: 0.5rem;
  width: 3.6rem;
  height: 1px;
  background-color: rgba(151, 151, 151, 1);
}
.typedetail {
  position: relative;
  width: 3.52rem;
  min-height: 2rem;
  left: 0.4rem;
  margin-top: 0.05rem;
  font-size: 0.144rem;
  line-height: 0.32rem;
  font-family: "PingFang";
  color: black;
}
.suthoravatar {
  position: relative;
  width: 4.32rem;
  height: 0.72rem;
  // margin-top: 0.16rem;
}
.authorimg {
  display: block;
  position: absolute;
  left: 0.4rem;
  width: 0.4rem;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.authorname2 {
  font-size: 0.16rem;
  font-family: "PingFang";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.96rem;
}
.line2 {
  position: absolute;
  left: 0.28rem;
  bottom: 0;
  width: 3.6rem;
  height: 1px;
  background-color: rgba(151, 151, 151, 1);
}
.doctitle {
  position: relative;
  margin-top: 0.16rem;
  margin-left: 0.4rem;
  font-size: 0.192rem;
  font-family: "PingFang";
  font-weight: bold;
  margin-bottom: 0.1rem;
}
.doc {
  position: relative;
  margin-left: 0.4rem;
  width: 3.52rem;
  font-size: 0.144rem;
  color: #454545b3;
  font-family: "PingFang";
  line-height: 0.32rem;
  font-weight: 400;
  text-align: justify;
  text-align-last: left;
}
/* swiper缩略图轮播 */
.swiper-container {
  background-color: #ffffff;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
  &.slide-1 {
    background-image: url("../assets/img/detailimg1.jpg");
  }
  &.slide-2 {
    background-image: url("../assets/img/detailimg2.jpg");
  }
  &.slide-3 {
    background-image: url("../assets/img/detailimg3.jpg");
  }
  &.slide-4 {
    background-image: url("../assets/img/detailimg4.jpg");
  }
  &.slide-5 {
    background-image: url("../assets/img/detailimg5.jpg");
  }
}
.gallery-top {
  height: 80% !important;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.swiper-slide {
  width: 100%;
}

.swiper-box {
  position: relative;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  width: 6.8rem;
  height: 6.5rem;
}
.el-dropdown {
  position: absolute;
  left: 1.496rem;
  top: 0;
  height: 0.35rem;
  width: 1.44rem;
  font-size: 0.15rem;
  font-family: "PingFang";
  border-radius: 0.2rem;
  line-height: 0.35rem;
  background: #004dff;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}
.clearfloat {
  clear: both;
  height: 0;
  font-size: 1px;
  line-height: 0px;
}
.pagination {
  width: 100%;
}
.uploadbtn {
  float: right;
  margin-right: 0.32rem;
  font-family: "PingFang";
  font-size: 0.18rem;
}
.modalupload {
  font-family: "PingFang";
}
.avatar-uploader {
  margin: 0 auto;
  width: 148px;
  height: 148px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatarimg {
  width: 148px;
  height: 148px;
  display: block;
}

.ptitle {
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  height: 20px;
  margin-top: 10px;
}
.notice {
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  height: 15px;
  margin: 4px 0;
}
.modalfooter {
  display: flex;
  justify-content: center;
}
.uploadok {
  width: 200px;
  font-size: 18px;
}
.tagslect2 {
  margin-left: 10px;
}
.choicefile {
  display: flex;
  justify-content: center;
  text-align: center;
}
.intro {
  width: 100%;
  display: flex;
  justify-content: center;
}
.progresstitle {
  margin-top: 0.2rem;
}
.progress {
  margin-top: 0.05rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: right;
  color: #ffffff;
  font-weight: bold;
  padding-right: 0.1rem;
}
.adownload a {
  width: 100%;
  display: block;
}
.tags {
  display: flex;
  justify-content: center;
}
</style>
